<template>
  <div class="machine-page">
    <Navbar :bg="navBg" :title="navTitle" />
    <div class="content-wrapper">
      <div class="content">
        <img src="@/assets/images/machine.png" alt="" />
        <div class="text-descriptions">
          <div class="t1">
            <div>排风</div>
          </div>
          <div class="t2 t-vertical">
            <div>排风阀</div>
            <span>({{ unitInfo.unitPFF === 0 ? '关闭' : `开启 角度${unitInfo.unitPFF}` }})</span>
          </div>
          <div class="t3">
            <div>房间</div>
          </div>
          <div class="t4 t-vertical" :class="unitInfo.unitFault ? '' : 'err'">
            <div>空调系统故障</div>
            <span>({{ unitInfo.unitFault ? '无故障' : '故障' }})</span>
          </div>
          <div class="t5 t-vertical">
            <div>主机</div>
            <span>({{ unitInfo.unitMain ? '开启' : '关闭' }})</span>
          </div>
          <div class="t6 t-vertical">
            <div>排风电机</div>
            <span>({{ unitInfo.unitPFDJ === 0 ? '关闭' : `开启 风速${unitInfo.unitPFDJ}` }})</span>
          </div>
          <div class="t7 t-horizontal">
            <div>回风阀</div>
            <span>({{ unitInfo.unitHFF ? `开启 角度${unitInfo.unitHFF}` : '关闭' }})</span>
          </div>
          <div class="t8">
            <div>送风</div>
          </div>
          <div class="t9 t-vertical">
            <div>新风阀</div>
            <span>({{ unitInfo.unitXFF ? `开启 角度${unitInfo.unitXFF}` : '关闭' }})</span>
          </div>
          <div class="t10 t-horizontal">
            <div>回风</div>
            <span>(温度：{{ unitInfo.unitHFTemp }}°C 湿度：{{ unitInfo.unitHFHumidity }}%)</span>
          </div>
          <div class="t11 t-vertical">
            <div>新风</div>
            <span>(温度：{{ unitInfo.unitXFTemp }}°C)</span>
          </div>
          <div class="t12">
            <div>混风</div>
          </div>
          <div :class="['t13', 't-letter', unitInfo.unitCXLW ? '' : 'err']">
            <div>初效</div>
            <span>({{ unitInfo.unitCXLW ? '正常' : '堵塞' }})</span>
          </div>
          <div class="t14 t-letter">
            <div>消毒</div>
            <span>({{ unitInfo.unitXD ? '开启' : '关闭' }})</span>
          </div>
          <div class="t15 t-letter">
            <div>冷水</div>
            <span>({{ unitInfo.unitCool ? '开启' : '关闭' }})</span>
          </div>
          <div class="t16 t-letter">
            <div>热水</div>
            <span>({{ unitInfo.unitHot ? '开启' : '关闭' }})</span>
          </div>
          <div class="t17 t-letter">
            <div>电加热</div>
            <span>({{ unitInfo.unitHeating ? '开启' : '关闭' }})</span>
          </div>
          <div class="t18 t-letter">
            <div>加湿</div>
            <span>({{ unitInfo.unitHumidifier ? '开启' : '关闭' }})</span>
          </div>
          <div class="t19 t-letter">
            <div>送风电机</div>
            <span>({{ unitInfo.unitSFDJ ? `开启 风速${unitInfo.unitSFDJ}` : '关闭' }})</span>
          </div>
          <div class="t20 t-letter" :class="unitInfo.unitZXLW ? '' : 'err'">
            <div>中效</div>
            <span>({{ unitInfo.unitZXLW ? '正常' : '堵塞' }})</span>
          </div>
          <div class="t21 t-vertical">
            <div>送风</div>
            <span>(温度：{{ unitInfo.unitSFTemp }}°C</span>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;湿度：{{ unitInfo.unitSFHumidity }}%)</span>
          </div>
          <div class="t22"><img src="@/assets/images/normal.png" alt="" /></div>
          <div class="t23">
            <!-- 送风电机的转速 -->
            <img src="@/assets/images/big-out.png" alt="" />
            <img src="@/assets/images/big-in.png" :style="{ '--rotation-speed': `${unitInfo.unitSFDJ}s` }" alt="" />
          </div>
          <div class="t24">
            <!-- 排风电机的转速 -->
            <img src="@/assets/images/small-out.png" alt="" />
            <img src="@/assets/images/small-in.png" :style="{ '--rotation-speed': `${unitInfo.unitPFDJ}s` }" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="actions">
      <div class="item">
        <div>
          <div class="title">状态</div>
          <div class="description">{{ statusFilter[unitInfo.acStatus] }}</div>
        </div>
      </div>
      <div class="item">
        <div>
          <div class="title">模式</div>
          <div class="description">{{ unitModeFilter[unitInfo.unitMode] }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useStore } from 'vuex'
import { statusFilter, unitModeFilter } from '@/utils/filter'
const store = useStore()
const unitInfo = ref({})

// 初始化数据
const init = () => {
  console.log('init==')
  const info = store.state.deviceInfo
  console.log(info, 'info')
  unitInfo.value = info
}
init()

watch(
  () => store.state,
  val => {
    console.log('store数据变化了==', val)
    const { deviceInfo } = val
    if (deviceInfo) {
      init()
    }
  },
  { deep: true }
)

const navBg = ref('#fff')
const navTitle = ref('空调机组运行工况')
</script>
<style lang="less" scoped>
@import url(@/assets/style/ac.less);
</style>
